<template>
	<view>
		<view class="navtit">
			<view class="navitem" v-for="(item,index) in typelist" :key="index" @click="changecondition(index,item)">
				<view>{{item.title}}</view>
				<image v-if="item.is_select==false" :src="item.img"></image>
				<image v-else :src="item.imged"></image>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		<view class="listbox">
			<view class="listitem" v-for="(item,index) in list" :key="index" @click="todetail(item)">
				<view class="upbox">
					<image :src="item.url"></image>
				</view>
				<view class="infobox">
					<view class="namebox">
						{{item.goods_name}}
					</view>
					<view class="stoke" v-if="item.stock_total">
						库存：{{item.stock_total}}
					</view>
					<view class="pricebox">{{parseFloat(item.score_price)==0?'':parseFloat(item.score_price)}}
						<text style="font-size: 28rpx;" v-if="parseFloat(item.score_price)!==0">积分+</text>
						￥{{parseFloat(item.goods_price_min)}}
					</view>
				</view>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				typelist:[
					{img:'../../static/xu1.png',
					imged:'../../static/xu2.png',
					title:'价格',is_select:false},
					{img:'../../static/xu1.png',
					imged:'../../static/xu2.png',
					title:'最热',is_select:false},
					{img:'../../static/xu1.png',
					imged:'../../static/xu2.png',
					title:'最新',is_select:false}
				],
				price_sort:'',
				special_sort:'',
				time_sort:'',
				is_data:true,
				list:[],
				keyword:'',
				cate_id:'',
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
					title: option.name
				});
			this.cate_id = option.id
			this.keyword = option.keyword
			this.getlist()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			changecondition(index,item){
				item.is_select = !item.is_select
				if(index==0&&item.is_select==true){
					this.price_sort = 1
					this.special_sort = ''
					this.time_sort = ""
				}if(index==0&&item.is_select==false){
					this.price_sort = 2
					this.special_sort = ''
					this.time_sort = ""
				}
				if(index==1&&item.is_select==true){
					this.special_sort = 1
					this.price_sort = ''
					this.time_sort = ""
				}if(index==1&&item.is_select==false){
					this.special_sort = 2
					this.price_sort = ''
					this.time_sort = ""
				}
				if(index==2&&item.is_select==true){
					this.time_sort = 1
					this.price_sort = ''
					this.special_sort = ""
				}if(index==3&&item.is_select==false){
					this.time_sort = 2
					this.price_sort = ''
					this.special_sort = ""
				}
				this.page = 1
				this.list = []
				this.getlist()
			},
			getlist(){
				this.$http({
					url:'/api/Wechat/getGoodsByCateId',
					data:{
						cate_id:this.cate_id,
						price_sort:this.price_sort,//价格1倒序2顺序
						special_sort:this.special_sort,//最热排序1倒序2顺序
						time_sort:this.time_sort,//时间排序1倒序2顺序
						is_special:'',//是否推荐1是0否
						page:this.page,
						limit:20,
						keyword:this.keyword
					}
				}).then(res=>{
					if(res.data.length){
						this.list.push(...res.data)
						this.page++
						return
					}
					this.is_data=false
				})
			},
			todetail(item){
				uni.navigateTo({
					url:'/pageshop/goodsinfo/goodsinfo?id='+item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navtit{
		width: 100%;
		height: 84rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		z-index: 9;
		.navitem{
			display: flex;
			align-items: center;
			width: 33.3%;
			justify-content: center;
			image{
				width: 14rpx;
				height: 30rpx;
				margin-left: 12rpx;
			}
		}
	}
	.listbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 690rpx;
		margin: 0 auto;
		justify-content: space-between;
		.listitem{
			width: 336rpx;
			height: 520rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.upbox{
				width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				image{
					width: 336rpx;
					height: 336rpx;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
				}
			}
			.infobox{
				width: 294rpx;
				padding: 0 20rpx;
				.namebox{
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 20rpx;
				}
				.pricebox{
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FF6178;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 20rpx;
				}
			}
		}
	}

</style>
